<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>table使用</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css" />
		<style>
		</style>
		<script src="js/jquery1.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//				$.mobile.loading("show", {
				//					text: 'test'
				//				});
			});
			$.mobile.document.on("click", "#open-popupArrow", function(evt) {
				$("#popupArrow").popup("open", {
					x: evt.pageX,
					y: evt.pageY
				});
				evt.preventDefault();
			});

			function closeLoading() {
				$.mobile.loading('hide');
			}
		</script>
	</head>

	<body>
		<div data-role="page" data-fullscreen="true" id="one" data-theme="a">
			<div data-role="header">
				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
				<h1>table使用</h1>
			</div>
			<div data-role="ui-content" data-theme="d">

				<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th data-priority="2">Rank</th>
							<th>Movie Title</th>
							<th data-priority="3">Year</th>
							<th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr>
							</th>
							<th data-priority="5">Reviews</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a>
							</td>
							<td>1941</td>
							<td>100%</td>
							<td>74</td>
						</tr>
						<tr>
							<th>2</th>
							<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a>
							</td>
							<td>1942</td>
							<td>97%</td>
							<td>64</td>
						</tr>
						<tr>
							<th>3</th>
							<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a>
							</td>
							<td>1972</td>
							<td>97%</td>
							<td>87</td>
						</tr>
						<tr>
							<th>4</th>
							<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a>
							</td>
							<td>1939</td>
							<td>96%</td>
							<td>87</td>
						</tr>
						<tr>
							<th>5</th>
							<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a>
							</td>
							<td>1962</td>
							<td>94%</td>
							<td>87</td>
						</tr>
						<tr>
							<th>6</th>
							<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a>
							</td>
							<td>1964</td>
							<td>92%</td>
							<td>74</td>
						</tr>
						<tr>
							<th>7</th>
							<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a>
							</td>
							<td>1967</td>
							<td>91%</td>
							<td>122</td>
						</tr>
						<tr>
							<th>8</th>
							<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a>
							</td>
							<td>1939</td>
							<td>90%</td>
							<td>72</td>
						</tr>
						<tr>
							<th>9</th>
							<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a>
							</td>
							<td>1952</td>
							<td>89%</td>
							<td>85</td>
						</tr>
						<tr>
							<th>10</th>
							<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a>
							</td>
							<td>2010</td>
							<td>84%</td>
							<td>78</td>
						</tr>
					</tbody>
				</table>
				<hr />
				<ul data-role="listview" data-filter="true" data-filter-placeholder="Find cars..." data-filter-theme="a" data-inset="true">
					<li>Acura</li>
					<li>Audi</li>
					<li>BMW</li>
					<li>Cadillac</li>
					<li>Ferrari</li>
				</ul>
				<hr />
				<form>
					<div class="ui-field-contain">
						<label for="select-native-2">选项:</label>
						<select name="select-native-2" id="select-native-2" data-mini="true">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
						</select>
					</div>
				</form>
				<hr />
				<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
					<legend>Horizontal controlgroup, mini sized:</legend>
					<label for="select-custom-14">Select A</label>
					<select name="select-custom-14" id="select-custom-14" data-native-menu="false">
						<option value="#">One</option>
						<option value="#">Two</option>
						<option value="#">Three</option>
					</select>
					<label for="select-custom-15">Select B</label>
					<select name="select-custom-15" id="select-custom-15" data-native-menu="false">
						<option value="#">One</option>
						<option value="#">Two</option>
						<option value="#">Three</option>
					</select>
					<label for="select-custom-16">Select C</label>
					<select name="select-custom-16" id="select-custom-16" data-native-menu="false">
						<option value="#">One</option>
						<option value="#">Two</option>
						<option value="#">Three</option>
					</select>
				</fieldset>
			</div>
			<div data-role="footer" data-position="fixed">
				<h6>友情链接：<a href="http://www.duonafanli.com">www.duonafanli.com</a></h6>
			</div>
		</div>

	</body>

</html>